<template>    
      <div class="main">
        
        <div class="search">
          <el-form :inline="true" class="demo-form-inline" :model='current'>
            
            <el-form-item label="类型">
                <el-select 
                    placeholder='类型' 
                    v-model="current.type" 
                    >
                    <el-option 
                      :label="item.name" 
                      :value="item.name" 
                      v-for="item in formInline.type" 
                      :key="item.desc">
                    </el-option>                    
                </el-select>                
            </el-form-item>

            <el-form-item label="品牌">
              <el-select placeholder="品牌" v-model="current.brand">
                  <el-option 
                      v-for="item in formInline.brand" 
                      :key="item.desc" 
                      :value="item.name" 
                      :label="item.name">
                  </el-option>                 
              </el-select>
            </el-form-item>
            <el-form-item label="价格">
              <el-select placeholder="价格区间" v-model="current.grade">
                <el-option 
                    :label='item.name' 
                    :value='item.desc' 
                    v-for="item in formInline.grade" 
                    :key="item.desc">
                </el-option>
                
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSearch">查询</el-button>
            </el-form-item>
          </el-form>            
            <div class="clear"></div>
        </div>
      </div>                       
</template>

<script>
import {getBicycleInfo,keywordSearch} from '@/networdk/user'
export default {
  name:'Home',
  data() {
    return {
      bicycleInfo:[],
      formInline:{
        brand:[
          {desc:0,name:'雅迪'},
          {desc:1,name:'小刀'},
          {desc:2,name:'爱玛'},
          {desc:3,name:'台铃'},
          {desc:4,name:'新日'},
          {desc:5,name:'立马'},
          {desc:6,name:'小牛'},        
        ],
        grade:[
          {id:0,desc:'lower',name:'30~50'},
          {desc:'low',name:'50~100'},
          {desc:'middle',name:'100~120'},
          {desc:'high',name:'120~150'},
          {desc:'higher',name:'150~200'},
        ],
        type:[
          {id:0,desc:'short',name:'短租'},
          {id:1,desc:'long',name:'长租'}
        ]
      },
      current:{
        type:'',
        brand:'',
        grade:''
      }     
    }
  },
  created(){
    this.getInfo()

    // this.defaultCurrent()
    

  },
  methods: {
    defaultCurrent(){
      this.current.type = this.formInline.type[0].name
      this.current.brand = this.formInline.brand[0].name
      this.current.grade = this.formInline.grade[0].desc
    },
    onSearch(){
      console.log('点击了查询',this.formInline);
     
      let type = this.current.type
      let brand = this.current.brand
      let grade = this.current.grade

      keywordSearch({type,brand,grade}).then(res=>{
        console.log('进入查询接口');
          let result = res.data.data
          if(result.status === 200) {
            console.log(result.result);
            this.$store.commit('searchInfo',result.result)                            
              console.log(this.current.type);
          
              this.$router.push({
                path:'/searchbicycle',
                query:{
                  type:this.current.type,
                  brand:this.current.brand,
                  grade:this.current.grade
                }
              })
            
          }         
      })      
    },
    getInfo(){
      getBicycleInfo().then(({data})=>{
        console.log('*********获取电动车信息********');
        console.log(data);
        if(data.data.status === 200){
          this.bicycleInfo = data.data.result         
          console.log(this.bicycleInfo);          
        }
      })
    }    
  },
}
</script>

<style lang='less' scoped>


</style>